<template>
	<div class="p-6 space-y-6">
		<el-card>
			<div class="flex justify-between items-center mb-4">
				<h3 class="text-lg font-semibold">📦 我的订单记录</h3>
				<el-button size="small" type="danger" @click="clearOrders" v-if="orders.length">清空订单</el-button>
			</div>

			<el-form :inline="true" :model="filters" class="mb-4">
				<el-form-item label="商品名">
					<el-input v-model="filters.keyword" placeholder="请输入商品名" size="small" clearable />
				</el-form-item>
				<el-form-item label="时间范围">
					<el-date-picker v-model="filters.dates" type="daterange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" @click="applyFilters">搜索</el-button>
					<el-button size="small" @click="resetFilters">重置</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="filteredOrders" v-if="filteredOrders.length" border>
				<el-table-column prop="name" label="商品" />
				<el-table-column prop="quantity" label="数量" />
				<el-table-column prop="total" label="总价" />
				<el-table-column prop="time" label="下单时间" />
			</el-table>
			<el-empty v-else description="暂无订单记录" />
		</el-card>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const orders = ref([])
const filters = ref({ keyword: '', dates: [] })

const clearOrders = () => {
	orders.value = []
	localStorage.removeItem('orders')
}

const applyFilters = () => {
	filteredOrders.value = orders.value.filter(order => {
		const matchKeyword = filters.value.keyword ? order.name.includes(filters.value.keyword) : true
		const matchDate = filters.value.dates.length
			? new Date(order.time) >= new Date(filters.value.dates[0]) && new Date(order.time) <= new Date(filters.value.dates[1])
			: true
		return matchKeyword && matchDate
	})
}

const resetFilters = () => {
	filters.value = { keyword: '', dates: [] }
	filteredOrders.value = [...orders.value]
}

const filteredOrders = ref([])

onMounted(() => {
	if (!localStorage.getItem('orders')) {
		const base = [
			'EUV光刻胶 - 光刻材料',
			'G线光刻胶 - 光刻材料',
			'紫外宽谱光刻胶 - 光刻材料',
			'电子光束刻胶 - 光刻材料',
			'氧化硅抛光液 - 抛光材料',
			'氧化铝抛光液 - 抛光材料',
			'纳米抛光液 - 抛光材料',
			'显影液 - 工艺化学品',
			'去胶剂 - 工艺化学品',
			'清洗剂 - 工艺化学品',
			'蚀刻液 - 工艺化学品'
		]
		const mockOrders = Array.from({ length: 15 }).map((_, i) => {
			const index = i % base.length
			const name = base[index]
			const quantity = Math.floor(Math.random() * 5 + 1)
			const unit = Math.floor(Math.random() * 500 + 100)
			return {
				id: Date.now() + i,
				productId: index + 1,
				name,
				quantity,
				total: (unit * quantity).toFixed(2),
				time: new Date(new Date().getTime() - Math.random() * 1000 * 60 * 60 * 24 * 30).toLocaleString()
			}
		})
		localStorage.setItem('orders', JSON.stringify(mockOrders))
	}
	orders.value = JSON.parse(localStorage.getItem('orders') || '[]')
	filteredOrders.value = [...orders.value]
})
</script>

<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>
  
